<template>
	<view id="my_container">
		<view class="top_content">
			<!-- 登录视图 -->
			<view class="login_view" v-if="loginFlag">
				<view class="user_info">
					<view class="user_picture">
						<img class="user_pic_img" :src="baseUrl + userInfo.avatarName" alt="用户头像" />
					</view>
					<view class="user_name">
						{{ userInfo.nickname }}
					</view>
				</view>
			</view>
			<!-- 未登录视图 -->
			<view class="not_login_view" v-else>
				<button class="login_btn" size="default" plain @click="loginHandle()">一键登录</button>
			</view>
		</view>
		<!-- 功能项列表 -->
		<view class="function_items" v-if="loginFlag">
			<view class="func_item" 
				v-for="(item, index) of func_items_d" 
				key="index"
				:class="{'not_last_func_item': index != func_items_d.length - 1}"
				@click="functionClickHandle(item.text)"
				>
				<view class="func_item_icon_text">
					<view class="func_item_icon">
						<image  :src="'../../static/my/'+ item.icon" mode=""></image>
					</view>
					<view class="func_item_text">
						{{ item.text }}
					</view>
				</view>
				<view class="func_item_gotoIcon">
					<image  src="../../static/common/right.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onShow } from "@dcloudio/uni-app";

onMounted(()=>{
	checkLogin();
})

// 图片基础路径
let baseUrl = uni.$baseUrl
// 用户信息
let userInfo = ref({});
// 登录状态
let loginFlag = ref(false);

// 功能项列表
let func_items_d = ref([
	{
		icon: "book.png",
		text: "账本管理"
	},
	{
		icon: "ai.png",
		text: "轻松AI"  // 2025-02-28将统计功能项改为AI功能
	},
	{
		icon: "category.png",
		text: "分类管理"
	},
	{
		icon: "about.png",
		text: "关于"
	}
])

// 检查登录状态
function checkLogin(){
	if(uni.getStorageSync("isLogin")){
		loginFlag.value = true;
		// 解析已存储的用户信息展示
		userInfo.value = JSON.parse(uni.getStorageSync("userInfo"));
	}
}

// 一键登录处理器
function loginHandle(){
	uni.login({
		provider: 'weixin',
		success(login) {
			// 调用登录方法， 获取临时码code
			loginExec(login.code);
		}
	});
}

async function getDD(){
	const res = await uni.$http.get("/users/2");
	console.log("-=-=", res);
}

// 一键登录执行器
async function loginExec(tempCode){
	// 调用后端登录接口，换取用户信息和token
	const res = await uni.$http.post(`/users/login/${tempCode}`);
	// 保存用户信息
	userInfo.value = res.data.data; 
	
	// 存储userInfo 和token到本地存储中， 更换登录状态标识
	uni.setStorageSync("userInfo", JSON.stringify(userInfo.value));
	uni.setStorageSync("token", res.header.Authorization);
	uni.setStorageSync("isLogin", true);
	
	loginFlag.value = true;
}

// 功能项点击处理器
function functionClickHandle(text){
	switch(text){
		case "账本管理":
			uni.navigateTo({
				url:`/subPkg1/account_book/account_book?openId=${userInfo.value.openid}`
			});
			break;
		case "关于":
			uni.$showT("累了就停下来看看风景吧...")
			break;
		case "分类管理":
			uni.$showT("待实现的功能...")
			break;
		case "轻松AI":
			uni.navigateTo({
				url:"/subPkg2/easy_ai/easy_ai"
			})
			break;
	}
}
	
</script>

<style lang="scss" scoped>
.function_items{
	width: 97vw;
	margin: 0 auto;
	border-radius: 20rpx;
	position: relative;
	overflow: hidden;
	margin-top: 20rpx;
}

.func_item{
	display: flex;
	justify-content: space-between;
	padding: 25rpx 10px;
	font-size: 14px;
	background-color: #fff;
	align-items: center;
}

.not_last_func_item{
	border-bottom: solid #eaeaea 1px;
}

.func_item_gotoIcon image{
	width: 50rpx;
}

.func_item_icon image{
	width: 50rpx;
	height: 50rpx;
}

.func_item_text{
	line-height: 50rpx;
	padding-left: 15rpx;
}

.func_item_icon_text{
	display: flex;
	justify-content: center;
	align-items: center;
}
	
.login_btn{
	width: 30vw;
	position: relative;
	top: 100rpx;
	color: #54ccff;
	font-size: 15px;
	padding: 3px 0px;
}
	
.top_content{
	// 视觉冲击的背景
	// background:
	//     repeating-linear-gradient(
	//       190deg,
	//       rgba(255, 0, 0, 0.5) 40px,
	//       rgba(255, 153, 0, 0.5) 80px,
	//       rgba(255, 255, 0, 0.5) 120px,
	//       rgba(0, 255, 0, 0.5) 160px,
	//       rgba(0, 0, 255, 0.5) 200px,
	//       rgba(75, 0, 130, 0.5) 240px,
	//       rgba(238, 130, 238, 0.5) 280px,
	//       rgba(255, 0, 0, 0.5) 300px
	//     ),
	//     repeating-linear-gradient(
	//       -190deg,
	//       rgba(255, 0, 0, 0.5) 30px,
	//       rgba(255, 153, 0, 0.5) 60px,
	//       rgba(255, 255, 0, 0.5) 90px,
	//       rgba(0, 255, 0, 0.5) 120px,
	//       rgba(0, 0, 255, 0.5) 150px,
	//       rgba(75, 0, 130, 0.5) 180px,
	//       rgba(238, 130, 238, 0.5) 210px,
	//       rgba(255, 0, 0, 0.5) 230px
	//     ),
	//     repeating-linear-gradient(
	//       23deg,
	//       red 50px,
	//       orange 100px,
	//       yellow 150px,
	//       green 200px,
	//       blue 250px,
	//       indigo 300px,
	//       violet 350px,
	//       red 370px
	//     );
	// 星空背景
	background-color:black;
	background-image:
	radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
	radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
	radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
	radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
	background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
	background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
	
	height: 330rpx;
	width: 97vw;
	box-sizing: border-box;
	margin: 0 auto;
	border-radius: 15rpx;
	color: white;
}

.login_view{
	display: flex;
	justify-content: center;
}

.user_info{
	margin-top: 20rpx;
}

.user_picture{
	// border: solid #1e1e1e 1px;
	width: 150rpx;
	height: 150rpx;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: hidden;
	margin-top: 10px;
}

.user_pic_img{
	width: 100%;
	height: 100%;
}

.user_name{
	font-size: 15px;
	text-align: center;
	margin-top: 25rpx;
}

</style>
